<template>
    <div>
        <el-card class="box-card">
            <el-form label-width="80px">
                <el-form-item label="你想说：" class="large-font">
                    <el-input type="textarea" v-model="qq" rows="5" placeholder="请输入你的问题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="send">发送</el-button>
                </el-form-item>
                <el-form-item label="回复：" class="large-font">
                <div class="large-font">
                <!-- 直接文本显示（单向绑定） -->
                    {{ answer }}
                </div>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from "../plugins/axios.js";
export default {
    data() {
        return {
            qq: "",
            answer: ""
        }
    },
    beforeCreate() {
        if (sessionStorage.getItem("user") == null) {
            this.$router.push("/login");
        }
    },
    methods: {
        send: function () {
            var curUser = JSON.parse(sessionStorage.getItem("user"));
            // 无需加uid因为凭证中含有
            axios.post("http://localhost:9000/llm/qianfan", "say=" + this.qq)
                // 箭头函数不会创建自己的this环境，否则会this会变回为axios
                .then((resp) => {
                    if(resp.data.code===2000)
                        this.answer = resp.data.data; 
                    else{
                        alert(resp.data.msg);
                    }
                }).catch((err) => {
                    console.log(err);
                    alert("发送失败"+err);
                });
        }
    }
}
</script>


<style scoped>
.box-card {
    background-color: rgb(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 800px;
    margin: 150px auto; /* 居中显示 */
    transition: transform 0.3s ease-in-out;
}
</style>